<template>
    <view class="homes">
        <uni-status-bar></uni-status-bar>
        <view style="height: 88rpx;"></view>
        
        <view class="fix-top">
            <uni-status-bar></uni-status-bar>
            <view class="nav-box">
                <view class="btn" @click="torecovery">
                    <image class="icon" src="../../static/icon/sc-Tab-icon-Active-01@3x.png"></image>
                    <text>去回收</text>
                </view>
                <!-- <view class="search" @tap="search_input()">
                    <image class="icon" src="../../static/icon/search@3x.png"></image>
                    <text>搜索商品</text>
                </view> -->
            </view>
        </view>
        <swiper indicator-dots="flag" circular="flag">
            <swiper-item v-for="item in advertList" :key="item.img">
                <image :src="baseUrl+item.img" mode=" scaleToFill" style="width: 100%;height: 100%;"></image>
            </swiper-item>
        </swiper>

        <!-- 导航栏区域 -->
        <view class="nav">
            <view class="nav_item" v-for="(item,index) in getcatList" :key="index" @click="toClassify(item.id)">
                <view class="img">
                    <image :src="item.image_url" mode="aspectFill"></image>
                </view>
                <text>{{item.name}}</text>
            </view>
            <view class="nav_item" @click="toClassify(0)">
                <view class="img">
                    <image src="../../static/icon/sc-home-all@3x.png" mode="aspectFill"></image>
                </view>
                <text>全部>></text>
            </view>
        </view>

        <!-- 活动专区 -->
        <view class="phone_product" v-if="isHotList.length > 0">
            <!-- 顶部 -->
            <view class="header">
                <image src="../../static/icon/sc-title-hd@3x.png" mode="aspectFill"></image>
                <text>活动专区</text>
            </view>

            <view class="phone_body" v-for="(item,index) in isHotList" :key="item.id" @click="toProductDetails(item.id)">
                <view class="phoneicon_img">
                    <view class="phone_img">
                        <image :src="item.image_url"></image>
                    </view>
                    <view class="phone_font">
                        <text>{{item.name}}</text>
                        <text class="number">积分:{{item.price}}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 精选产品区域 -->
        <view class="phone_product" v-if="isBoutiqueList.length > 0">
            <!-- 头部信息 -->
            <view class="header">
                <image src="../../static/icon/sc-title-cp@3x.png"></image>
                <text>精选产品</text>
            </view>

            <!-- 产品信息区域 -->
            <view class="phone_body" v-for="(item,index) in isBoutiqueList" :key="item.id" @click="toProductDetails(item.id)">
                <view class="phoneicon_img">
                    <view class="phone_img">
                        <image :src="item.image_url"></image>
                    </view>
                    <view class="phone_font">
                        <text>{{item.name}}</text>
                        <text class="number">￥{{item.price}}</text>
                    </view>
                </view>
            </view>
    
        </view>

    </view>

</template>

<script>
    
    export default{
        data(){
            return{
                "flag":true,
                iStatusBarHeight:0,
                toHome:{
                    flag: false,   //是否切换
                    current: 0 //当前
                },
                isBoutiqueList: [],
                isHotList: [],
                advertList: [],
                baseUrl: '',
                getcatList: [],
            }
        },
        onLoad() {
            this.getSwipers(),
            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight
        },
        mounted() {
            this.baseUrl = this.$store.state.baseUrl;
            this.httpApi();
        },
        methods:{
            toClassify(id) {
                this.$emit('toClassify', id);
            },
            httpApi() {
                uni.showLoading({
                    title: '加载中...'
                })
                Promise.all([
                    this._getIsBoutiqueList(),
                    this._getIsHotList(),
                    this._getAdvertList(),
                    this._getcat(),
                ]).then(res => {
                    uni.hideLoading()
                })
            },
            // 精选产品api
            _getIsBoutiqueList() {
                this.$u.api.getList({
                    page: '1',
                    limit: '4',
                    code: '999',
                    where: {boutique: '1'}
                }).then(res => {
                    this.isBoutiqueList = res.list;
                }).catch(e => {
                })
            },
            // 专区产品api
            _getIsHotList() {
                this.$u.api.getList({
                    page: '1',
                    limit: '10',
                    code: '999',
                    where: {activity: '1'},
                }).then(res => {
                    this.isHotList = res.list;
                }).catch(e => {
                })
            },
            // 商城幻灯片api
            _getAdvertList() {
                this.$u.api.getAdvertList({
                    code: 'tpl1_banner'
                }).then(res => {
                    this.advertList = res.list;
                }).catch(e => {
                })
            },
            // 商城首页分类api
            _getcat() {
                this.$u.api.getcat({code: '999'}).then(res => {
                    this.getcatList = res;
                }).catch(e => {
                })
            },
            // 去回收
            torecovery() {
                uni.navigateTo({
                    url: '../../../mypages/User/index'
                })
            },
            /* 搜索页面 */
            search_input(){
                uni.navigateTo({
                    url:"/pages/seek/seek"
                })
            },
            // 商品详情
            toProductDetails(id) {
                uni.navigateTo({
                    url:'/shop/pages/product/productDetails?id='+id
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    
    .fix-top{
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        background-color:#fff;
        .uni-status-bar {
            background-color: #fff;
        }
        .nav-box{
            height: 88rpx;
            background-color: #fff;
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;
            .btn{
                border: 1px solid #e5e5e5;
                width: 200rpx;
                height: 64rpx;
                border-radius: 99px;
                margin-left: 30rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                .icon{
                    width: 40rpx;
                    height: 40rpx;
                }
                text{
                    color: #1bc078;
                    font-size: 28rpx;
                    margin-left: 15rpx;
                    font-weight: bold;
                }
            }
            .search{
                width: 244rpx;
                height: 64rpx;
                background-color: #f2f2f2;
                border-radius: 99px;
                margin-left: 20rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                .icon{
                    width: 40rpx;
                    height: 40rpx;
                    margin-left: -10rpx;
                }
                text{
                    color: #999;
                    font-size: 28rpx;
                    margin-left: 15rpx;
                }
            }
        }
    }


    page{
      padding-top:calc(var(--status-bar-height) + 88rpx) ;
     }
     .status_bar {
        height: var(--status-bar-height);
        width: 100%;
        position: fixed;
       }
     .top{
      background-color: #fff;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index:99;
       .z-nav{
           height: 88rpx;
           background-color: #fff;
           display: flex;
           align-items: center;
           justify-content: center;
        }
     }
    .homes{
        padding-bottom: calc(var(--window-bottom) + 70px); //内容区域距离底部的距离
        swiper{
            display:flex;
            margin: 10px auto;
            width: 683rpx;
            height: 260rpx;
            background-color: #bfdef0;
            border-radius: 20rpx;
        }
    }
    .nav{
        background-color: #fff;
          border-radius: 20rpx;
          margin: 30rpx;
          display: flex; //弹性布局，默认弹性盒子元素的方向是横向
          flex-wrap: wrap; //在必要时换行
          box-sizing: border-box;
          padding: 10rpx;
        .nav_item{
              width: 25%;
              display: flex;
              align-items: center;
              justify-content: center; //设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
              flex-wrap: wrap;
            .img{
                width: 100%;
                  display: flex;
                  justify-content: center;
                image{
                    width:100rpx;
                    height:100rpx;
                    margin: 20rpx auto;
                }
            }
        }
            text{
                    font-size: 24rpx;
                    line-height: 48rpx;
                    color: #191919;;
                    font-weight:bold;
                }

    }
    .activity{
        display:flex;
        margin: 30rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        flex-wrap: wrap; /* 必要时换行*/
        box-sizing: border-box;
        position: relative;
        .hot-icon{
                width: 80rpx;
                height: 80rpx;
                position: absolute;
                left: 0;
                top: 0;
                background: url(../../static/icon/xianshi@3x.png) no-repeat;
                background-size:61rpx 61rpx;
                z-index: 99;
            }
        .activity_one{
            width: 100%;
            padding: 0 30rpx;
            height: 88rpx;
            display: flex;
            align-items:center;

            image{
                width: 48rpx;
                height: 48rpx;
                background-color: #fff3ee;
            }
            text{
                width: 150rpx;
                height: 35rpx;
                font-size: 36rpx;
                line-height: 34rpx;
                color: #191919;
                font-weight:bold;
                margin-left: 10px;
            }

        }
    }

    .phone_product{
        display: flex;
        background-color: #ffffff;
        border-radius: 20rpx;
        box-sizing: border-box;
        margin: 30rpx;
        flex-wrap:wrap;
        .header{
            width: 100%;
            height: 88rpx;
            display: flex;
            padding: 10rpx;
            align-items:center;
            margin-left: 10px;
            image{
                width: 50rpx;
                height: 50rpx;
            }
            text{
                width: 145rpx;
                font-size: 36rpx;
                color: #191919;
                font-weight:bold;
                margin-left: 20rpx;
            }
        }
        .phone_body{
            display: flex;
            width: calc(50% - 30rpx);
            height: 380rpx;
            background-color: #ffffff;
            margin-left: 20rpx;
            margin-bottom: 10px;
            border-radius: 8rpx;
            border: solid 2rpx #f2f2f2;
            box-sizing: border-box;
            flex-wrap: wrap;
            .phoneicon_img{
                display: flex;
                align-items: center;
                justify-content: center;//设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式
                flex-wrap: wrap;
                .phone_img{
                    overflow:hidden;
                    width: 263rpx;
                    height: 245rpx;
                    box-sizing: border-box;
                    align-items:center;
                    margin-top: 20rpx;
                    padding: 20rpx;
                    border-radius: 4rpx;
                    image{
                        width: 253rpx;
                        height: 245rpx;
                    }
                }
                .phone_font{
                    width: 100%;
                    font-weight:bold;
                    justify-content: center;
                    margin: 10rpx 0 15rpx 10rpx;
                    text{
                        display: block;
                        width: 255rpx;
                        font-size: 24rpx;
                        line-height: 24rpx;
                        color: #191919;
                        padding-bottom: 10rpx;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }
                    .number{
                        color: red;
                        display: block; //转换成块级元素显示，前后带有换行符
                        margin-top: 13rpx;
                    }
                }
            }
        }
    }
</style>
